<template>
  <div class="disciplineBoard">

    <el-card class="box-card card">

      <!-- top -->
      <template v-scope class="top">
        <el-input v-model="search" class="search" placeholder="根据学科名称搜索" />
        <!-- <el-button icon="el-icon-edit" type="success" class="addBtn" @click="showDialog=true">新增学科</el-button> -->
        <el-button class="toClear" @click="Clear">清除</el-button>
        <el-button type="toSearch" @click="Search">搜索</el-button>
        <el-button icon="el-icon-edit" type="success" class="addBtn" @click="jia">新增学科</el-button>
      </template>

      <!-- message -->
      <div class="message">
        <el-alert
          type="success"
          :closable="false"
          show-icon
        >
          <slot name="title"><span> 数据一共{{ page.total }}条 </span></slot>
        </el-alert>
      </div>

      <!-- table -->
      <div>
        <el-table
          :data="tableData"
          style="width:100%"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="70"
          />
          <el-table-column
            prop="subjectName"
            label="学科名称"
            width="100"
          />
          <el-table-column
            prop="creatorID"
            label="创建者"
          />
          <el-table-column
            prop="addDate"
            label="创建日期"
          />
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
          />
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"
          />
          <el-table-column
            prop="tags"
            label="标签"
          />
          <el-table-column
            prop="totals"
            label="题目数量"
          />
          <el-table-column label="操作" width="260">
            <template v-slot="scope">
              <el-row>
                <el-button type="text" size="small" @click="jump1">学科分类</el-button>
                <el-button type="text" size="small">学科标签</el-button>
                <el-button type="text" size="small" @click="xiu(scope.row.id)">修改</el-button>
                <el-button type="text" @click="deleteSub(scope.row.id)">删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- pagination分页-->
      <div class="pagination-subject">
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            background
            :page-sizes="[5, 10, 15, 20]"
            :current-page.sync="page.page"
            :page-size="page.pagesize"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-row>
        <!-- 弹窗 -->
        <changeSub :showdialog.sync="showdialog" :list="list" @reAfterAdd="reAfterAdd(page)" />
        <!-- </changeSub> -->
      </div>

    </el-card>
  </div>
</template>

<script>
import changeSub from './changesub.vue'
import { getList, delSubList, subdatails } from '@/api/subject'

export default {
  components: { changeSub },
  data() {
    return {
      title: '',
      tableData: [],
      showdialog: false,
      search: '',
      currentPage: 2,
      page: {
        page: 1,
        size: 10,
        total: 30 // 服务器的总数据
      },
      list: {}
      // tableData: [{
      //   id: 1,
      //   subName: '123',
      //   creater: '超级管理员',
      //   createDate: '2019-8-3',
      //   express: '是',
      //   SecMenu: '0',
      //   label: '0',
      //   questionNum: '0'
      // },
      // {
      //   id: 2,
      //   subName: '18517',
      //   creater: '超级管理员',
      //   createDate: '2022-11-3 19:5:36',
      //   express: '否',
      //   SecMenu: '1',
      //   label: '0',
      //   questionNum: '0'
      // }, {
      //   id: 3,
      //   subName: '88',
      //   creater: '111',
      //   createDate: '2022-12-6 20:06:03',
      //   express: '是',
      //   SecMenu: '0',
      //   label: '2',
      //   questionNum: '0'
      // }]
    }
  },
  created() {
this.getList(this.page)
  },
  methods: {
    // 将接口中的数据渲染
    async getList() {
      const { items, counts } = await getList(this.page)
      // console.log(res, '1231232')
      this.page.total = counts
      this.tableData = items
      console.log(this.tableData, '页面渲染')
    },
    reAfterAdd(page) {
      this.getList(page)
      console.log('reAfterAdd')
    },
    // 添加科目
    jia() {
      this.showdialog = true
    },
    // 修改科目
   async xiu(id) {
     this.list = await subdatails(id)
    console.log(this.list, '123')
      this.showdialog = true
    },
    // 搜索按钮
    Search() {
      console.log('开始搜索,关键词是：', this.search)
      // 根据筛选
      this.tableData = this.fuzzyQuery(this.tableData, this.search)
      this.page.total = this.tableData.length
    },
    // 搜索用户的方法
    fuzzyQuery(list, keyWord) {
      var reg = new RegExp(keyWord)
      var arr = []
      for (var i = 0; i < list.length; i++) {
        if (reg.test(list[i].subjectName)) {
          arr.push(list[i])
        }
      }
      return arr
    },
    // 消除
    Clear() {
      this.search = ''
      this.getList(this.page)
    },
    // 学科->目录 跳转
    jump1() {
      this.$router.push('/subject/menu')
    },

    // 删除提示弹窗样式内容
    // open() {
    //   this.$confirm('此操作将永久删除该科目, 是否继续?', '提示', {
    //     cancelButtonText: '取消',
    //     confirmButtonText: '确定',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$message({
    //       type: 'success',
    //       message: '删除成功!'
    //     })
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     })
    //   })
    // },

    // 删除目录
    async deleteSub(id) {
      // alert(id)
            await this.$confirm('您确定删除该科目吗')
            await delSubList(id)
            this.getList(this.page)
            this.$message.success('删除科目成功')
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.pagesize = val
    },
    handleCurrentChange(num, val) {
      console.log(`当前页: ${val}`)
      this.page.page = num
      this.getList(this.page)
    }
  }
}

</script>

<style scoped>

.card{
  margin-top: 10px;
  margin-right: 15px;
  margin-left: 15px;
  background-color: #fff;
}
.search{
  width: 200px;
  height: 8px;
}
.clear{
  margin-left: 15px;
  /* margin-right: 10px; */
}
.top{
  position: relative;
}
.addBtn{
position: absolute;
right: 15px;
}
.message{
  margin-top: 15px;
  margin-bottom: 10px;
}
.pagination{
  margin-top: 5px;
}
</style>
